<template>
  <div>
    <a-modal title="选择规格" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="800px" :mask-closable="false">
      <a-spin :loading="conLoading" style="width: 100%">
        <a-scrollbar style="height: 300px; overflow: auto">
          <div class="spec-con">
            <div class="item" v-for="item of specList" :key="item.id">
              <div class="top">
                <a-space>
                  <a-checkbox v-model="item.checked">{{ item.nameCn }}</a-checkbox>
                  <div>({{ item.nameEn }})</div>
                </a-space>
              </div>
              <div class="bottom clearfix">
                <div class="fl" style="width: 80px">
                  <a-checkbox v-model="item.selAll" @change="selAll($event, item)">全选</a-checkbox>
                </div>
                <div class="fl" style="width: 650px">
                  <a-space class="mr10" v-for="children of item.valueList" :key="children.nameCn">
                    <a-checkbox v-model="children.checked" @change="item.checked = true">[{{ children.valueCode }}]{{ children.valueCn }}</a-checkbox>
                    <div>({{ children.valueEn }})</div>
                  </a-space>
                </div>
              </div>
            </div>
          </div>
        </a-scrollbar>
      </a-spin>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" class="ml10" @click="handleOk">确认</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { pageProductSpec } from '@/api/product'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['list'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        loading: false,
        conLoading: false,
        specList: [],
      })

      const open = () => {
        getSpecList()
      }

      const getSpecList = async () => {
        data.conLoading = true
        const res: any = await pageProductSpec({ pageSize: 99999 })
        data.conLoading = false
        data.specList = res?.data?.records
        // 回显，一级一级作对比
        if (props.list[0]) {
          data.specList.forEach((e: any) => {
            let index = props.list.findIndex((el: any) => e.nameCn == el.nameCn)
            if (index != -1 && index != undefined) {
              e.checked = true
              let selSpecValList = props.list[index].valueList
              e.valueList.forEach((el: any) => {
                let i = selSpecValList.findIndex((ell: any) => el.valueCn == ell.valueCn)
                if (i != -1 && i != undefined) {
                  el.checked = selSpecValList[i].checked
                }
              })
              e.selAll = e.valueList.every((el: any) => el.checked)
            }
          })
        }
      }

      const handleOk = () => {
        let newList = _.cloneDeep(data.specList).filter((e: any) => e.checked)
        emit('saveSpec', newList)
        visible.value = false
      }
      const handleCancel = () => {
        visible.value = false
      }

      const selAll = (val: boolean, item: any) => {
        val ? (item.checked = true) : ''
        item.valueList.map((e: any) => {
          e.checked = val
          return e
        })
      }
      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        selAll,
      }
    },
  })
</script>

<style lang="less" scoped>
  .spec-con {
    width: 100%;
    border: 1px solid #d7d7d7;
    border-bottom: none;
    .item {
      min-height: 60px;
      border-bottom: 1px solid #d7d7d7;
      padding: 10px 10px;
      .top {
      }
      .bottom {
      }
    }
  }
</style>
